﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="DD_Proto.aspx.cs" Inherits="UI_Prototypes._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
	<style type="text/css">
	
	/* Don't change these options */
	#movableNode{
		position:absolute;
	}
	
	#arrDestInditcator{
		position:absolute;
		display:none;
		width:100px;
	}
	/* End options that shouldn't be changed */

	
	#arrangableNodes,#movableNode ul{
		padding-left:0px;
		margin-left:0px;
		margin-top:0px;
		padding-top:0px;
		width: 325px;
	}
	
	#arrangableNodes li,#movableNode li{
		list-style-type:none;
		cursor:default;
	}

    .node_wrapper 
    {
		border: 1px solid gray;
		/*margin: 5px 0 5px 0;*/
		margin: 0;
		padding: 2px;
    }
    
	.node_song, .node_key, .node_singer 
	{
	    display: inline-block;
    }	    

	.node_song
	{
	    width: 200px;
	    cursor: pointer;
	}
	.node_key 
	{
	    width: 25px;
	    font-weight: bold;
	}
	.node_singer 
	{
	    display: inline; 
	    width: 50px;
	    color: Green;
	}
	
	    

	</style>
	
	<script type="text/javascript">
	    /************************************************************************************************************
	    (C) www.dhtmlgoodies.com, October 2005
	
	    This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	    Terms of use:
	    You are free to use this script as long as the copyright message is kept intact. However, you may not
	    redistribute, sell or repost it without our permission.
	
	    Thank you!
	
	    www.dhtmlgoodies.com
	    Alf Magne Kalleland
	
	    ************************************************************************************************************/

	    var offsetYInsertDiv = -1; // Y offset for the little arrow indicating where the node should be inserted.
	    if (!document.all) offsetYInsertDiv = offsetYInsertDiv - 7; 	// No IE


	    var arrParent = false;
	    var arrMoveCont = false;
	    var arrMoveCounter = -1;
	    var arrTarget = false;
	    var arrNextSibling = false;
	    var leftPosArrangableNodes = false;
	    var widthArrangableNodes = false;
	    var nodePositionsY = new Array();
	    var nodeHeights = new Array();
	    var arrInsertDiv = false;
	    var insertAsFirstNode = false;
	    var arrNodesDestination = false;
	    function cancelEvent() {
	        return false;
	    }
	    function getTopPos(inputObj) {

	        var returnValue = inputObj.offsetTop;
	        while ((inputObj = inputObj.offsetParent) != null) {
	            returnValue += inputObj.offsetTop;
	        }
	        return returnValue;
	    }

	    function getLeftPos(inputObj) {
	        var returnValue = inputObj.offsetLeft;
	        while ((inputObj = inputObj.offsetParent) != null) returnValue += inputObj.offsetLeft;
	        return returnValue;
	    }

	    function clearMovableDiv() {
	        if (arrMoveCont.getElementsByTagName('LI').length > 0) {
	            if (arrNextSibling) arrParent.insertBefore(arrTarget, arrNextSibling); else arrParent.appendChild(arrTarget);
	        }

	    }

	    function initMoveNode(e) {
	        clearMovableDiv();
	        if (document.all) e = event;
	        arrMoveCounter = 0;
	        arrTarget = this;
	        if (this.nextSibling) arrNextSibling = this.nextSibling; else arrNextSibling = false;
	        timerMoveNode();
	        arrMoveCont.parentNode.style.left = e.clientX + 'px';
	        arrMoveCont.parentNode.style.top = e.clientY + 'px';
	        return false;

	    }
	    function timerMoveNode() {
	        if (arrMoveCounter >= 0 && arrMoveCounter < 10) {
	            arrMoveCounter = arrMoveCounter + 1;
	            setTimeout('timerMoveNode()', 20);
	        }
	        if (arrMoveCounter >= 10) {
	            arrMoveCont.appendChild(arrTarget);
	        }
	    }

	    function arrangeNodeMove(e) {
	        if (document.all) e = event;
	        if (arrMoveCounter < 10) return;
	        if (document.all && arrMoveCounter >= 10 && e.button != 1 && navigator.userAgent.indexOf('Opera') == -1) {
	            arrangeNodeStopMove();
	        }

	        arrMoveCont.parentNode.style.left = e.clientX + 'px';
	        arrMoveCont.parentNode.style.top = e.clientY + 'px';

	        var tmpY = e.clientY;
	        arrInsertDiv.style.display = 'none';
	        arrNodesDestination = false;


	        if (e.clientX < leftPosArrangableNodes || e.clientX > leftPosArrangableNodes + widthArrangableNodes) return;

	        var subs = arrParent.getElementsByTagName('LI');
	        for (var no = 0; no < subs.length; no++) {
	            var topPos = getTopPos(subs[no]);
	            var tmpHeight = subs[no].offsetHeight;

	            if (no == 0) {
	                if (tmpY <= topPos && tmpY >= topPos - 5) {
	                    arrInsertDiv.style.top = (topPos + offsetYInsertDiv) + 'px';
	                    arrInsertDiv.style.display = 'block';
	                    arrNodesDestination = subs[no];
	                    insertAsFirstNode = true;
	                    return;
	                }
	            }

	            if (tmpY >= topPos && tmpY <= (topPos + tmpHeight)) {
	                arrInsertDiv.style.top = (topPos + tmpHeight + offsetYInsertDiv) + 'px';
	                arrInsertDiv.style.display = 'block';
	                arrNodesDestination = subs[no];
	                insertAsFirstNode = false;
	                return;
	            }
	        }
	    }

	    function arrangeNodeStopMove() {
	        arrMoveCounter = -1;
	        arrInsertDiv.style.display = 'none';

	        if (arrNodesDestination) {
	            var subs = arrParent.getElementsByTagName('LI');
	            if (arrNodesDestination == subs[0] && insertAsFirstNode) {
	                arrParent.insertBefore(arrTarget, arrNodesDestination);
	            } else {
	                if (arrNodesDestination.nextSibling) {
	                    arrParent.insertBefore(arrTarget, arrNodesDestination.nextSibling);
	                } else {
	                    arrParent.appendChild(arrTarget);
	                }
	            }
	        }
	        arrNodesDestination = false;
	        clearMovableDiv();
	    }

	    function saveArrangableNodes() {
	        var nodes = arrParent.getElementsByTagName('LI');
	        var string = "";
	        for (var no = 0; no < nodes.length; no++) {
	            if (string.length > 0) string = string + ',';
	            string = string + nodes[no].id;
	        }

	        document.forms[0].hiddenNodeIds.value = string;

	        // Just for testing
	        document.getElementById('arrDebug').innerHTML = 'Ready to save these nodes:<br>' + string.replace(/,/g, ',<BR>');

	        // document.forms[0].submit(); // Remove the comment in front of this line when you have set an action to the form.

	    }

	    function initArrangableNodes() {
	        arrParent = document.getElementById('arrangableNodes');
	        arrMoveCont = document.getElementById('movableNode').getElementsByTagName('UL')[0];
	        arrInsertDiv = document.getElementById('arrDestInditcator');

	        leftPosArrangableNodes = getLeftPos(arrParent);
	        arrInsertDiv.style.left = leftPosArrangableNodes - 5 + 'px';
	        widthArrangableNodes = arrParent.offsetWidth;

	        var subs = arrParent.getElementsByTagName('LI');
	        for (var no = 0; no < subs.length; no++) {
	            subs[no].onmousedown = initMoveNode;
	            subs[no].onselectstart = cancelEvent;
	        }

	        document.documentElement.onmouseup = arrangeNodeStopMove;
	        document.documentElement.onmousemove = arrangeNodeMove;
	        document.documentElement.onselectstart = cancelEvent;

	    }

	    window.onload = initArrangableNodes;
	
	</script>

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Drag/Drop Prototype 1</h2>
    <p>
        Demonstrates possible drag/drop behavior for creating set lists</p>
<H1>Set List 1</H1>
<ul id="arrangableNodes">
	<li id="node1"><div class="node_wrapper"><div class="node_song">Mustang Sally</div><div class="node_key">C</div><div class="node_singer">Natalie</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	<li id="node2"><div class="node_wrapper"><div class="node_song">Get Ready</div><div class="node_key">G</div><div class="node_singer">Sophia</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	<li id="node3"><div class="node_wrapper"><div class="node_song">Signed Sealed Delivered</div><div class="node_key">C</div><div class="node_singer">Norm/Nat</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	<li id="node4"><div class="node_wrapper"><div class="node_song">Rolling in the Deep</div><div class="node_key">F</div><div class="node_singer">Sophia</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	<li id="node5"><div class="node_wrapper"><div class="node_song">Are You Gonna Go My Way</div><div class="node_key">Eb</div><div class="node_singer">Norm</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	<li id="node6"><div class="node_wrapper"><div class="node_song">Hella Good</div><div class="node_key">Ab</div><div class="node_singer">Natalie</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	<li id="node7"><div class="node_wrapper"><div class="node_song">Bring Me to Life (Evanessance)</div><div class="node_key">D</div><div class="node_singer">Sophia</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	<li id="node8"><div class="node_wrapper"><div class="node_song">Soul Man</div><div class="node_key">F</div><div class="node_singer">Norm</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>	
	<li id="node9"><div class="node_wrapper"><div class="node_song">Please Don't Stop The Music / Mamma Say (Michael Jackson)</div><div class="node_key">F</div><div class="node_singer">Soph/Norm</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>	
	<li id="node10"><div class="node_wrapper"><div class="node_song">Mamma Told Me Not To Come</div><div class="node_key">C</div><div class="node_singer">Sophia</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>	
</ul>	
<p>
	<a href="#" onclick="saveArrangableNodes();return false">Save</a>
</p>
<div id="movableNode"><ul></ul></div>	
<div id="arrDestInditcator"><img src="images/insert.gif"></div>
<div id="arrDebug"></div>
<form method="post" action="????">
	<input type="hidden" name="hiddenNodeIds">
</form>

    <br />
</asp:Content>
